<script setup lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue'
import ChannelSelect from '@/components/ChannelSelect.vue'
import type { ArticleItem, ArticleListParams } from '@/types'
import { delArticleAPI, getArticleListAPI } from '@/apis/user'
import { Delete, Edit } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
defineComponent({
  name: 'ArticleView',
})
const articleListParams = ref<ArticleListParams>({
  status: undefined,
  channel_id: null,
  begin_pubdate: null,
  end_pubdate: null,
  page: 1,
  per_page: 5,
})
// 删除按钮点击事件
const delArticle = async (id: number) => {
  ElMessageBox.confirm('是否确认删除该文章？', '狠心提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      // 删除文章
      await delArticleAPI(id)
      ElMessage.success('删除成功')
      getArticleList()
    })
    .catch(() => {})
}
// 筛选按钮点击事件
const onSearch = () => {
  articleListParams.value.page = 1
  getArticleList()
}

const articleList = ref<ArticleItem[]>([])
const total = ref<number>(0)
// date picker组件的日期范围
const dateArr = ref<string[]>([])
// 侦听date picker组件的日期范围
watch(dateArr, (newVal) => {
  if (newVal === null) {
    articleListParams.value.begin_pubdate = null
    articleListParams.value.end_pubdate = null
  } else {
    articleListParams.value.begin_pubdate = newVal[0]
    articleListParams.value.end_pubdate = newVal[1]
  }
})
const getArticleList = async () => {
  const res = await getArticleListAPI(articleListParams.value)
  console.log('articleList', res)
  articleList.value = res.data.results
  total.value = res.data.total_count
}
onMounted(() => {
  getArticleList()
})
</script>

<template>
  <div class="article-view">
    <el-card>
      <div default="header">
        <!-- 面包屑组件 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-form label-width="82px" style="margin-top: 20px">
        <el-form-item label="状态:">
          <el-radio-group v-model="articleListParams.status">
            <el-radio :value="null">全部</el-radio>
            <el-radio :value="0">草稿</el-radio>
            <el-radio :value="1">待审核</el-radio>
            <el-radio :value="2">审核通过</el-radio>
            <el-radio :value="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道:" style="max-width: 400px" prop="channel_id">
          <ChannelSelect v-model="articleListParams.channel_id" />
        </el-form-item>
        <el-form-item label="日期:" style="max-width: 400px">
          <el-date-picker
            type="daterange"
            v-model="dateArr"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="onSearch">筛选</el-button>
        </el-form-item>
      </el-form>
      {{ articleListParams }}
    </el-card>

    <el-card style="margin-top: 20px">
      <div default="header">根据筛选条件共查询到 {{ total }} 条结果：</div>
      <el-table :data="articleList">
        <el-table-column label="封面">
          <template #default="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover.images[0]"
              :preview-src-list="scope.row.cover.images"
              :preview-teleported="true"
              :hide-on-click-modal="true"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === 1">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="warning">审核失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate"></el-table-column>
        <el-table-column label="阅读数" prop="read_count"></el-table-column>
        <el-table-column label="评论数" prop="comment_count"></el-table-column>
        <el-table-column label="点赞数" prop="like_count"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" :icon="Edit" circle></el-button>
            <el-button
              type="danger"
              :icon="Delete"
              circle
              @click="delArticle(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[2, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        v-model:current-page="articleListParams.page"
        v-model:page-size="articleListParams.per_page"
        @change="getArticleList"
      />
    </el-card>
  </div>
</template>
<style></style>
